import { DropTargetMonitor, DropTarget, DropTargetConnector } from 'react-dnd';
import React from 'react';
import { Col } from 'antd';

import CenterDesign from '../CenterDesign';
import style from './index.less';

const ColContent = (param: any) => {
  const { canDrop, isOver, connectDropTarget, changeCardList } = param;
  // todo 动态渲染组件
  return (
    <Col span={12} ref={connectDropTarget} className={style.dashed}>
      {param.cardList.children.map((item, index) => {
        return (
          <CenterDesign
            key={item.id}
            cardList={[item]}
            changeCardList={changeCardList}
          />
        );
      })}
    </Col>
  );
};

export default DropTarget(
  'box',
  {
    drop: (props: any, monitor: any) => {
      return props.cardList;
    },
  },
  (connect: DropTargetConnector, monitor: DropTargetMonitor) => ({
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver(),
    canDrop: monitor.canDrop(),
  }),
)(ColContent);
